<template>
    <van-tabbar route v-model="localActive" style="font-weight: bolder">
        <van-tabbar-item to="/" @click="loadIndex">首页</van-tabbar-item>
        <van-tabbar-item >标签</van-tabbar-item>
        <van-tabbar-item >标签</van-tabbar-item>
        <van-tabbar-item to="/my" @click="updateActive">我</van-tabbar-item>
    </van-tabbar>

<!--    <van-back-top right="3vw" bottom="8vh"/>-->
</template>

<script setup>

import {ref, watch} from "vue";

const localActive = ref(0)

const porps = defineProps({
    active: {
        type: Number,
        default: 0
    }
})

watch(()=>[porps.active],()=>{
    console.log(porps.active)
})

const emit = defineEmits(['clickLoadIndex','updateActive']);
const loadIndex=()=>{
    emit('clickLoadIndex')
}
const updateActive=()=>{
    emit('updateActive',localActive.value)
}
</script>

<style>
.van-tabbar-item {
    font-size: 16px;
}
</style>